<template>
	<div class="nav">
		<Nav></Nav>
	</div>
	<div class="mfa">
		<div class="mtop">
			<div class="tleft">
				<img class="easy" src="../../public/img/更简单.png" alt="">
				<div class="tltext">127,358.260 高质量素材， 商用0风险</div>
			</div>
			<div class="tright"><img class="huiyuan" src="../../public/img/VIP.png" alt=""></div>

		</div>
		<!-- 花瓣热搜部分================================== -->
		<div class="hot">
			<div class="htitle">花瓣热搜</div>
			<div class="htu">
				<div class="hottu-box">
					<img class="hottu" src="../../public/img/嗨购双11.png" alt="">
				</div>

				<div class="hottu-box">
					<img class="hottu" src="../../public/img/汽车服务专区.png" alt="">
				</div>
				<div class="hottu-box">
					<img class="hottu" src="../../public/img/直播物料.png" alt="">
				</div>
				<div class="hottu-box">
					<img class="hottu" src="../../public/img/海报系列.png" alt="">
				</div>
				<div class="hottu-box">
					<img class="hottu" src="../../public/img/地产系列.png" alt="">
				</div>
				<div class="hottu-box">
					<img class="hottu" src="../../public/img/金融系列.png" alt="">
				</div>
			</div>

		</div>

		<!-- ===================================================== -->
		<div class="fa3">
			<designFa class="done">
				<template v-slot:sheji>
					<div class="design-son">
						<div class="tupian-box">
							<img class="tu" src="../../../../public/img/设计趋势01.png" alt="">
						</div>
						<h4 class="text">撕纸风系列</h4>
					</div>
					<div class="design-son">
						<div class="tupian-box">
							<img class="tu" src="../../public/img/sc-07.webp" alt="">
						</div>
						<h4 class="text">互联网系列</h4>
					</div>
					<div class="design-son">
						<div class="tupian-box">
							<img class="tu" src="../../public/img/sc-08.webp" alt="">
						</div>
						<h4 class="text">万圣节主题</h4>
					</div>
					<div class="design-son">
						<div class="tupian-box">
							<img class="tu" src="../../public/img/sc-09.webp" alt="">
						</div>
						<h4 class="text">南瓜笑脸</h4>
					</div>
					<div class="design-son">
						<div class="tupian-box">
							<img class="tu" src="../../public/img/sc-10.webp" alt="">
						</div>
						<h4 class="text">降温警示</h4>
					</div>
					<div class="design-son">
						<div class="tupian-box">
							<img class="tu" src="../../public/img/sc-06.webp" alt="">
						</div>
						<h4 class="text">爱的味道</h4>
					</div>
				</template>
			</designFa>
			<bigBox class="box">
				<template v-slot:work>
					<div class="box2">
						<img class="works" src="../../public/img/sc-01.png" alt="">
						<h4 class="wtext">双十一活动</h4>

					</div>
					<div class="box2">
						<img class="works" src="../../public/img/sc-02.webp" alt="">
						<h4 class="wtext">课件制作</h4>

					</div>
					<div class="box2">
						<img class="works" src="../../public/img/sc-03.png" alt="">
						<h4 class="wtext">狂欢大促</h4>

					</div>
					<div class="box2">
						<img class="works" src="../../public/img/sc-04.webp" alt="">
						<h4 class="wtext">节日主题</h4>

					</div>
					<div class="box2">
						<img class="works" src="../../public/img/sc-05.webp" alt="">
						<h4 class="wtext">宵夜小吃</h4>

					</div>

				</template>

			</bigBox>
		</div>
	</div>
</template>
<script setup>
	import works from '../componens/thh/sucai01/works.vue'
	import designFa from '../componens/thh/sucai01/design-fa.vue'
	import design from '../componens/thh/sucai01/design.vue'
	import bigBox from '../componens/thh/sucai01/big-box.vue'
	import Nav from './nav.vue'


</script>
<style lang="scss" scoped>
	.nav {
		position: absolute;
		top: 0;
		left: 0px;
	}
	.design-son {
		width: 196px;
		height: 336px;
		background-color: rgb(242, 234, 234);
		border-radius: 15px;
		box-shadow: 0px 0px 2px 1px rgb(2249, 237, 237);

		.tupian-box {
			width: 163px;
			height: 280px;
			margin: 10px auto;
			line-height: 100px;

			.tu {
				width: 163px;
				height: 280px;
				margin-top: 10px;
			}
		}

		.text {
			width: 164px;
			height: 43px;
			text-align: center;
			line-height: 43px;
			font-weight: 700;
			margin: 0 auto;

		}
	}

	.box2 {
		width: 240px;
		height: 320px;
		background-color: rgb(245, 248, 249);
		text-align: center;
		border-radius: 10px;

		.works {
			width: 134px;
			height: 238px;
			border-radius: 10px;
			margin-top: 30px;
		}

		.wtext {
			width: 240px;
			height: 35px;
			background-color: rgb(237, 242, 245);
			text-align: center;
			line-height: 35px;
			margin-top: 7px;
			border-radius: 14px;
		}

	}

	.mfa {
		width: 1298px;
		height: auto;

		// margin: 0 auto;
		position: absolute;
		top: 60px;
		left: 0px;

		.mtop {
			height: 150px;
			background-image: url(../../public/img/t-背景图.png);
			display: flex;
			justify-content: space-between;

			.tleft {
				width: 458px;
				height: 150px;

				.easy {
					width: 458px;
					height: 51px;
					margin-top: 12px;
				}

				.tltext {
					width: 458px;
					height: 19px;
					font-size: 16px;
					color: rgb(144, 147, 151);
					margin-top: 10px;
				}
			}

			.tright {
				width: 458px;
				height: 150px;

				.huiyuan {
					width: 458px;
					height: 150px;


				}
			}
		}

		.fa3 {
			width: 1290px;
			height: auto;
			margin: 0 auto;
		}

		/* 花瓣热搜 */
		.hot {
			width: 1296px;
			height: 166px;

			.htitle {
				width: 1296px;
				height: 29px;
				font-size: 24px;
				font-weight: 700;
				margin: 10px;

			}

			.htu {
				width: 1296px;
				height: 113.5px;
				display: flex;
				justify-content: space-between;

				.hottu-box {
					width: 196px;
					height: 113px;

					.hottu {
						width: 196px;
						height: 113px;

					}
				}
			}

		}
	}
</style>